<template>
  <div class="shopCart">
    <div class="header">
      <img :src="logo" class="sidebar-logo">
      <p>
        <!--全部商品-->{{ $t('shop.allProducts') }}: {{ moditylen }}
        <i class="el-icon-refresh-right" @click="queryShopping" />
      </p>
    </div>
    <div class="cartContent">
      <el-table
        ref="multipleTable"
        :data="tableData"
        row-key="fid"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="30"
          align="center"
        /><!--商品名称-->
        <el-table-column :label="$t('shop.productName')" align="center" min-width="150px">
          <template slot-scope="scope">
            <div class="cart">
              <img :src="$img + scope.row.FIMG" alt="" style="width: 50px;height: auto;max-height: 50px;">
              <div class="cartname">
                {{ scope.row.fname }}
                <br>
                <!--商品编码-->{{ $t('shop.productNumber') }}: {{ scope.row.fnumber }}
              </div>
            </div>
          </template>
        </el-table-column><!--单价-->
        <el-table-column :label="$t('shop.price1')" prop="fprice" align="center" />
        <el-table-column :label="$t('shop.number')" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.fqty" size="mini" :min="0" @change="numHandel(scope.$index)" />
          </template>
        </el-table-column><!--小计-->
        <el-table-column :label="$t('shop.subtotal')" prop="subtotal" align="center" />
        <el-table-column :label="$t('shop.operation')" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="delTabData(scope.$index)"><!--删除-->{{ $t('shop.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="account">
        <span class="empty" @click="empty"><!--清空购物车-->{{ $t('shop.emptyCart') }}</span>
        <span class="money"><!--合计-->{{ $t('shop.amountTotal') }}: <span>￥{{ moneyAll }}</span></span>
        <el-button v-debounce type="danger" @click="closeAccount"><!--结算订单-->{{ $t('shop.tallyOrder') }}</el-button>
      </div>
      <jc-pagination
        v-show="total > 10"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="queryShopping"
      />
    </div>
  </div>
</template>

<script>
import { queryShopping, updateShopping, deleteShopping,
  createSalApply, deleteShoppingList } from '@/api/marketManage/saleReport'
import Bus from '@/utils/bus'

export default {
  name: '',
  data() {
    return {
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 200, // 每页显示多少条数据
      tableData: [], // 商品列表
      fmaterial: [], // 选中
      moneyAll: 0.00, // 金额全部
      moditylen: 0, // 全部商品
      logo: require('@/assets/img/logo.png'),
      saleDetails: []
    }
  },
  watch: {

  },
  created() {
    // 监听商城加入购物车
    Bus.$on('shopcart', () => {
      this.queryShopping()
    })
    this.tableData.length === 0 && this.queryShopping()
  },
  methods: {
    // 购物车列表
    queryShopping() {
      const DATA = {
        pageNum: this.pageNum, // 当前页
        pageSize: this.pageSize // 每页显示多少条数据
      }
      queryShopping(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.array
          this.moditylen = this.tableData.length
          this.handleSelectAll(this.tableData)
          this.tableData.map(res => {
            res.subtotal = res.fprice * res.fqty
            this.moneyAll += res.subtotal
          })
          this.total = res.data.total
        } else {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        }
      })
    },
    // 全选
    handleSelectAll(selection) {
      // 用于多选表格，清空用户的选择filtrate
      this.$refs.multipleTable.clearSelection()
      if (selection.length > 0 && selection[0]) {
        selection.map(item => {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        })
      }
    },
    // 结算-生成申请单
    closeAccount() {
      this.saleDetails = []
      this.tableData.forEach(item => {
        this.saleDetails.push({
          fmaterialId: item.fmaterialId,
          fqty: item.fqty,
          fmallPrice: item.fprice
        })
      })
      const DATA = {
        saleDetails: this.saleDetails
      }
      createSalApply(DATA).then(res => {
        if (res.code === 0) {
          this.$router.push({ path: '/customOrderList' })
          this.empty()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        }
      })
    },
    // 清空购物车
    empty() {
      const DATA = {
        list: this.fmaterEmpty
      }
      deleteShoppingList(DATA).then(res => {
        if (res.code === 0) {
          this.queryShopping()
        } else {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        }
      })
    },
    // 勾选
    handleSelectionChange(val) {
      this.moneyAll = 0
      this.fmaterial = []
      this.fmaterEmpty = []
      val.forEach(item => {
        this.fmaterial.push(item.fid)
        this.fmaterEmpty.push({ fid: item.fid })
        this.moneyAll += item.subtotal
      })
    },
    // 监听数量
    numHandel(index) {
      // 更新
      const { fqty, fprice, fmaterialId } = this.tableData[index]
      updateShopping({ fqty, fprice, fmaterialId })
      // 不更新列表，直接计算
      this.moneyAll = 0
      this.tableData[index].subtotal = fqty * fprice
      this.tableData.map(res => {
        res.subtotal = res.fprice * res.fqty
        if (this.fmaterial.includes(res.fid)) {
          this.moneyAll += res.subtotal
        }
      })
    },
    // 删除
    delTabData(index) {
      // 全部商品
      this.moditylen--
      const item = this.tableData[index]
      this.moneyAll -= item.subtotal
      // 删除
      deleteShopping({ fid: item.fid })
      this.tableData.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scope>
.shopCart {
  padding: 0.6vw;
  background: #FFFFFF;
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 1000px;
    p {
      margin: 10px 0 5px 0;
      font-size: 16px;
      color: #E2231A;
      i {
        text: '刷新';
        cursor: pointer;
        color: #666;
        font-weight: 600;
      }
    }
    img {
      width: auto;
      height: 80px;
    }
  }
  .cartContent {
    width: 1000px;
  }
  .account {
    text-align: right;
    margin-top: 10px;
    position: relative;
    .empty {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 14px;
      color: #333;
      cursor: pointer;
    }
    .money {
      margin-right: 20px;
      font-size: 12px;
      color: #999;
      span {
        font-size: 16px;
        color: #E2231A;
      }
    }
  }
  .cart{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .cartname {
      text-align: left;
      margin-left: 10px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
